<template>
  <view class="container">
    <commonHead :userInfo="state.userInfo"/>
    <view class="content">
      <view class="awaitMain">
        <view class="title">我的待办</view>
        <view class="bottom">
          <view class="item" @click="goToUnSubmitPage(1)">
            <image src="/static/icon_img05.png"></image>
            <text>未交初稿</text>
            <text class="nums">{{state.orderStat?.one || 0}}</text>
          </view>
          <view class="item" @click="goToUnSubmitPage(2)">
            <image src="/static/icon_img06.png"></image>
            <text>需修改</text>
            <text class="nums">{{state.orderStat?.two || 0}}</text>
          </view>
          <view class="item" @click="goToUnSubmitPage(3)">
            <image src="/static/icon_img07.png"></image>
            <text>需降重定稿</text>
            <text class="nums">{{state.orderStat?.three || 0}}</text>
          </view>
        </view>
      </view>
      <view class="awaitMain">
        <view class="title">常用功能</view>
        <image src="/static/teacher_img01.jpg" class="orderImg" @click="goToOrder"></image>
      </view>
      <view class="awaitMain" style="height: auto;">
        <view class="title">
          关联数据
          <view class="more">更多<uni-icons type="right" size="10" color="rgba(35, 35, 35, 0.52);"></uni-icons></view>
        </view>
        <view class="dataBottom">
          <view class="dataItem">
            <view class="subTitle">总款项</view>
            <view class="subBottom">
              <view class="p">工:<view class="price">{{state.orderStat?.total_order_price_gong || 0}}</view>元</view>
              <view class="p">文:<view class="price">{{state.orderStat?.total_order_price_wen || 0}}</view>元</view>
            </view>
          </view>
          <view class="dataItem">
            <view class="subTitle">订单数</view>
            <view class="subBottom">
              <view class="p">工:<view class="price">{{state.orderStat?.order_num_gong || 0}}</view></view>
              <view class="p">文:<view class="price">{{state.orderStat?.order_num_wen || 0}}</view></view>
            </view>
          </view>
          <view class="dataItem">
            <view class="subTitle">已结款</view>
            <view class="subBottom">
              <view class="p">工:<view class="price">{{state.orderStat?.yet_price_gong || 0}}</view>元</view>
              <view class="p">文:<view class="price">{{state.orderStat?.yet_price_wen || 0}}</view>元</view>
            </view>
          </view>
        </view>
      </view>
      <view class="orderMain">
        <view class="title">
          <text>订单列表</text>
          <view class="tabs">
            <view :class="['tabItem', item.id == state.tabId ? 'tabItemHover' : '']" v-for="(item, index) in state.tabs" :key="index" @click="orderChangeTab(item)">{{item?.name}}</view>
          </view>
        </view>
        <view class="table">
          <view class="tr">
            <view class="label"></view>
            <view class="label label01">名称</view>
            <view class="label">初稿</view>
            <view class="label label02">修改</view>
            <view class="label">定稿</view>
          </view>
          <view class="body">
            <view class="td" v-for="(item, index) in state.orderList?.list" :key="index">
              <view class="label">
                <text style="margin-top: -20rpx;">{{item?.teacher_yet_price}}</text>/<text style="margin-bottom: -20rpx;">{{item?.teacher_price}}</text>
              </view>
              <view class="label label01">{{item?.name}}</view>
              <ProgressBar :item="item" pageType="teacher"/>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <TabBar :active="0"/>
</template>

<script setup>
  import { commonHead } from './components/head.vue'
  import { ref, reactive } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { getTeacherIndex, getOrderList } from '@/utils/teacher.js'
  import TabBar from '@/components/tabBar.vue'
  import ProgressBar from '@/components/progress.vue'
  const state = reactive({
    userInfo: null,
    tabs:[{
      id: "",
      name:'全'
    }, {
      id: 1,
      name:'工'
    }, {
      id: 2,
      name:'文'
    }],
    tabId: "",
    orderStat: null,
    user: {},
    orderList: []
  })
  onShow(() => {
    state.user = uni.getStorageSync('userInfo')
  })
  onLoad(async() => {
    await getTeacherInfo()
    await getOrderListFun("")
  })
  
  const orderChangeTab = async(item) => {
    state.tabId = item.id == null ? '' : item?.id
    await getOrderListFun(item.id)  
  }
  // 跳转未交初稿页面
  const goToUnSubmitPage = (type) => {
    uni.navigateTo({
      url:`/pages/teacher/unSubmitPage?pageType=${type}`
    })
  }
  // 跳转需修改
  const goToEdit = () => {
    uni.navigateTo({
      url:"/pages/teacher/edit"
    })
  }
  // 跳转需降重定稿页面
  const goToWeight = () => {
    uni.navigateTo({
      url:"/pages/teacher/reduceWeight"
    })
  }
  // 跳转订单市场页面
  const goToOrder = () => {
    uni.navigateTo({
      url:`/pages/teacher/orderPage?userInfo=${state.userInfo}`
    })
  }
  const getTeacherInfo = async() => {
    await getTeacherIndex({}).then((res) => {
      if (res?.code == 1) {
        state.userInfo = res.result?.user;
        state.orderStat = res?.result?.stat
        uni.setStorageSync('teacherInfo', res.result?.user)
      }
      
    })
  }
  const getOrderListFun = async(type) => {
    console.log(172, type)
    let params = {
      page: 1,
      limit: 20,
      type: type //工科还是文科1工科2文科
    }
    await getOrderList(params).then((res) => {
      if (res?.code ==  1) {
        state.orderList = res?.result
      }
      console.log(143, res)
      
    })
  }
</script>

<style lang="scss" scoped>
  .container{
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    .content{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: calc(100vh - 480rpx);
      overflow-y: scroll;
      .awaitMain{
        width: 714rpx;
        height: 258rpx;
        border-radius: 14rpx;
        background: rgba(247, 247, 247, 1);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 30rpx;
        padding-bottom: 30rpx;
        .title{
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 30rpx;
          color: rgba(35, 35, 35, 1);
          margin-left: 30rpx;
          margin-top: 30rpx;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 90%;
          .more{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: rgba(35, 35, 35, 0.52);
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .bottom{
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          margin-top: 20rpx;
          .item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            image{
              width: 82rpx;
              height: 82rpx;
            }
            text{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 20rpx;
              color: rgba(35, 35, 35, 0.52);
              margin-top:10rpx;
            }
            .nums{
              margin-top:10rpx;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 30rpx;
              color: rgba(62, 62, 62, 1);
            }
          }
        }
        .orderImg{
          width: 530rpx;
          height: 146rpx;
          margin-top: 20rpx;
          margin-left: 100rpx;
        }
        .dataBottom{
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;
          margin-top: 10rpx;
          .dataItem{
            width: 214rpx;
            height: 246rpx;
            border-radius: 20rpx;
            background: linear-gradient(180deg, #E8EDF3 0%, #CFD8F3 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .subTitle{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              text-align: center;
              color: rgba(35, 35, 35, 0.52);
              margin-bottom:20rpx;
            }
            .subBottom{
              display: flex;
              flex-direction: column;
              .p{
                display: flex;
                flex-direction: row;
                font-family: HarmonyOS Sans SC;
                font-weight: 400;
                font-size: 24rpx;
                text-align: center;
                color: rgba(35, 35, 35, 1);
                align-items: center;
                justify-content: center;
                margin-top: 10rpx;
                .price{
                  font-family: PingFang SC;
                  font-weight: 600;
                  font-size: 40rpx;
                  text-align: center;
                  margin-left:10rpx;
                  margin-right:10rpx;
                }
              }
            }
          }
        }
      }
      .orderMain{
        width: 714rpx;
        border-radius: 14rpx;
        margin-top: 20rpx;
        background: #ffffff;
        // min-height: 300rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title{
          margin-top: 20rpx;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: row;
          text{
            margin-left: 20rpx;
            font-family: PingFang SC;
            font-weight: 600;
            font-size: 30rpx;
            color: rgba(35, 35, 35, 1);
          }
          .tabs{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-right: 20rpx;
            .tabItem{
              width: 64rpx;
              height: 34rpx;
              border-radius: 3rpx;
              border: 2rpx solid rgba(107, 107, 107, 1);
              display: flex;
              justify-content: center;
              align-items: center;
              margin-left: 10rpx;
            }
            .tabItemHover{
              background: rgba(209, 218, 243, 1);
              border: 2rpx solid rgba(11, 105, 218, 1);
              color: rgba(11, 105, 218, 1);

            }
          }
        }
        .table{
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 96%;
          .tr{
            display: flex;
            flex-direction: row;
            width: 100%;
            justify-content: flex-end;
            margin-top: 20rpx;
            .label{
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 24rpx;
              color: rgba(122, 122, 122, 1);
              min-width: 100rpx;
              text-align: center;
            }
            .label01{
              width: 200rpx;
              height: 24rpx;
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 20rpx;
              color: rgba(60, 60, 60, 1);
            }
            .label02{
              width: 200rpx;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
            }
          }
          .body{
            display: flex;
            flex-direction: column;
            width: 100%;
            .td{
              width: 100%;
              display: flex;
              flex-direction: row;
              background: rgba(209, 243, 241, 1);
              border-radius: 6rpx;
              padding-top: 10rpx;
              padding-bottom: 10rpx;
              padding-left: 10rpx;
              overflow: hidden;
              margin-bottom: 20rpx;
              .label{
                font-family: HarmonyOS Sans SC;
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(122, 122, 122, 1);
                min-width: 100rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                .span{
                  width: 28rpx;
                  height: 26rpx;
                  border: 2rpx solid rgba(11, 105, 218, 1);
                  margin-left: 10rpx;
                  flex-shrink: 0;
                }
                .span:nth-last-child(1){
                  margin-left: 0;
                }
                .spanHover{
                  background: rgba(28, 246, 21, 1);
                }
              }
              .label01{
                width: 200rpx;
                height: 24rpx;
                font-family: HarmonyOS Sans SC;
                font-weight: 400;
                font-size: 20rpx;
                color: rgba(60, 60, 60, 1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: block;
                flex-shrink: 0;
                margin-top: 20rpx;
              }
              .label02{
                width: 200rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .span{
                  width: 28rpx;
                  height: 26rpx;
                  border: 2rpx solid rgba(11, 105, 218, 1);
                }
                .span:nth-last-child(1){
                  margin-left: 10rpx;
                }
                .spanHover{
                  background: rgba(28, 246, 21, 1);
                }
              }
            } 
          }
        }
      }
    }
  }
</style>